<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端截图html2canvas</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" defer></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li {
            font-size: 10px;
            margin: 10px 0;
        }
        img{
            width: 300px;
        }
    </style>
    <script>
        window.onload = function () {
            html2canvas(document.querySelector('ul'), {
                useCORS: true
            }).then(canvas => {
                document.body.appendChild(canvas)
            })
        }
    </script>
</head>

<body>
    <ul>
        <li>Lorem, ipsum dolor.</li>
        <li>Excepturi, molestiae recusandae!</li>
        <li>Corrupti, earum voluptate?</li>
        <li>Quisquam, consectetur iure?</li>
        <li>
            <img src="https://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028"/>
        </li>
        <li>Debitis, sed quas.</li>
        <li>Natus, asperiores vitae!</li>
        <li>Nihil, voluptates ad.</li>
        <li>Neque, dignissimos autem.</li>
        <li>A, nemo cumque.</li>
        <li>Fugiat, nihil dolorum.</li>
        <li>Eius, optio distinctio!</li>
        <li>Temporibus, quos beatae?</li>
        <li>Hic, ducimus placeat?</li>
        <li>Quia, libero perspiciatis.</li>
        <li>Repellat, porro soluta.</li>
        <li>Minima, ullam magni.</li>
        <li>Eius, vel laudantium.</li>
        <li>Culpa, id est?</li>
        <li>Saepe, ut blanditiis.</li>
        <li>Iusto, rem harum!</li>
        <li>Modi, enim porro.</li>
        <li>Vel, libero incidunt!</li>
        <li>Recusandae, est ab.</li>
        <li>Tempore, rem assumenda.</li>
        <li>Cumque, sit illum?</li>
        <li>Aliquid, alias doloribus?</li>
        <li>Error, porro quas!</li>
        <li>Consectetur, voluptatibus soluta?</li>
        <li>Ratione, sed dolor.</li>
    </ul>
</body>

</html>